<template>
	<!-- 商品列表 -->
	<div id="tops">
		<div class="Box">
			<el-scrollbar>
				<div class="filter-container">
					<div class="filter-item" :model="formInline">
						<el-input v-model="formInline.title" placeholder="输入商品名称" clearable></el-input>
						<el-input v-model="formInline.barcode" placeholder="输入商品条形码" clearable></el-input>
						<el-select style="margin: 0px 10px;" v-model="formInline.status" placeholder="选手商品状态" clearable>
							<el-option label="下架" :value="0"></el-option>
							<el-option label="正常" :value="1"></el-option>
						</el-select>
						<el-cascader v-model="formInline.categoryId" :options="options" placeholder="选择类目" :props="{ checkStrictly: true }"
						 clearable>
						</el-cascader>
					</div>
					<div>
						<el-button type="primary" @click="liste()" icon="el-icon-search" v-insert="['operation:goods:list']">查找</el-button>
						<el-button type="primary" @click="upad()" icon="el-icon-edit" v-insert="['operation:goods:create']">添加</el-button>
						<el-button type="danger" @click="dels()" :disabled='multipleSelection.length == 0 ? true : false' icon="el-icon-delete" v-insert="['operation:goods:batchdelete']">批量删除</el-button>
					</div>
					<!-- 弹窗 -->
					<el-dialog :title="title" :visible.sync="dialogFormVisible" class="on" v-if="dialogFormVisible">
						<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px">
							<el-form-item label="类目名称" :label-width="formLabelWidth" prop="title">
								<el-input v-model="ruleForm.title" autocomplete="off" width="50px"></el-input>
							</el-form-item>
							<el-form-item label="类目图片" prop="picUrl" :label-width="formLabelWidth">
								<el-upload class="avatar-uploader" action="http://192.168.1.84:8081/upload/admin" :show-file-list="false"
								 :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
									<img v-if="ruleForm.picUrl" :src="ruleForm.picUrl" class="avatar" />
									<i v-else class="el-icon-plus avatar-uploader-icon"></i>
								</el-upload>
							</el-form-item>
							<el-form-item label="父类目" :label-width="formLabelWidth" prop="parentId">
								<el-cascader v-model="ruleForm.parentId" :options="options" placeholder="选择父类目、默认一级类目" :props="{ checkStrictly: true }"
								 clearable>
								</el-cascader>
							</el-form-item>
						</el-form>
					</el-dialog>
				</div>
				<el-main class="Main">
					<el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange" empty-text="暂无数据"
					 size="mini" v-loading="loading" element-loading-text="正在查询中。。。">
						<el-table-column type="selection" width="55" align="center"> </el-table-column>
						<el-table-column type="expand" label="sku信息" align="center">
							<template slot-scope="props">
								<el-table :data="props.row.skuList" border class="table">
									<el-table-column align="center" prop="barCode" label="商品条码">
									</el-table-column>
									<el-table-column align="center" prop="title" label="商品规格">
									</el-table-column>
									<el-table-column align="center" prop="stock" label="商品库存">
									</el-table-column>
									<el-table-column align="center" prop="freezeStock" label="商品冻结库存">
									</el-table-column>
									<el-table-column align="center" label="原价">
										<template slot-scope="scope">
											{{scope.row.originalPrice/100}}
										</template>
									</el-table-column>
									<el-table-column align="center" label="现价">
										<template slot-scope="scope">
											{{scope.row.price/100}}
										</template>
									</el-table-column>
									<el-table-column align="center" label="VIP价">
										<template slot-scope="scope">
											{{scope.row.vipPrice/100}}
										</template>
									</el-table-column>
								</el-table>
							</template>
						</el-table-column>
						<el-table-column align="center" prop="id" label="商品ID">
						</el-table-column>
						<el-table-column align="center" width="100" prop="title" label="名称">
						</el-table-column>
						<el-table-column align="center" label="图片">
							<template slot-scope="scope">
								<img :src="scope.row.img" style="width:40px" />
							</template>
						</el-table-column>
						<el-table-column align="center" label="商品详细展示">
							<template slot-scope="scope">
								<el-button type="primary" @click="see(scope.row)" size="small">查看</el-button>
							</template>
						</el-table-column>
						<el-table-column align="center" prop="categoryId" label="类目ID">
						</el-table-column>
						<el-table-column align="center" prop="freightTemplateId" label="邮费模板ID">
						</el-table-column>
						<el-table-column align="center" prop="sales" label="销量">
						</el-table-column>
						<el-table-column align="center" prop="unit" label="单位">
						</el-table-column>
						<el-table-column align="center" label="是否在售">
							<template slot-scope="scope">
								<el-tag :type="scope.row.status ? 'success' : 'info'">{{
					      scope.row.status ? "在售" : "未售"
					    }}</el-tag>
							</template>
						</el-table-column>
						<el-table-column align="center" prop="description" width="300" label="描述">
						</el-table-column>
						<el-table-column label="操作" align="center" width="250">
							<template slot-scope="scope">
								<el-button type="primary" @click="upad(scope.row)" size="mini" v-insert="['operation:goods:edit']">编辑</el-button>
								<el-button :type="scope.row.status ? 'warning' : 'success'" size="mini" @click="handlestatus(scope.row)" v-insert="['operation:goods:edit']">
									{{ scope.row.status ? "下架" : "上架" }}
								</el-button>
								<el-button type="danger" @click="del(scope.row)" size="mini" v-insert="['operation:goods:delete']">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
				</el-main>
				<el-container>
					<el-header class="buttom">
						<div class="block1">
							<!-- <span class="demonstration"></span> -->
							<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" layout="total, sizes, prev, pager, next, jumper"
							 :page-size="count" :total="totalCount" :current-page="pageNo" :page-sizes="[10, 20, 30, 40, 50, 100]">
							</el-pagination>
						</div>
					</el-header>
				</el-container>
				<!-- 弹出框 -->
				<el-dialog style="" title="商品详情" align="center" :visible.sync="permissionVisible" width="50%" :before-close="handleClose">
					<div v-html="div"></div>
				</el-dialog>
			</el-scrollbar>
		</div>
	</div>

</template>

<script>
	import {
		Goodlist,
		GoodSpous,
		GoodStatus,
		GoodSee,
		Gooddels,
		Gooddel
	} from '../../api/goodslist.js'
	export default {
		data() {
			var checkAge = (rule, value, callback) => {
				if (!value) {
					return callback(new Error('类目名不能为空'))
				} else {
					callback()
				}
			}
			return {
				multipleSelection: [],
				input: '',
				div: '',
				permissionVisible: false,
				tableData: [],
				loading: true,
				count: 20,
				totalCount: 1,
				id: '',
				dialogFormVisible: false,
				title: '',
				pageNo: 1,
				options: [],
				value: '',
				formLabelWidth: '120px',
				updataID: '',
				formInline: {
					title: '',
					barcode: '',
					categoryId: '',
					status: null
				},
				ruleForm: {
					title: '',
					barcode: '',
					categoryId: '',
					status: null
				},
				rules: {
					name: [{
						required: true,
						validator: checkAge,
						trigger: 'blur'
					}]
				}
			}
		},

		methods: {
			// 查看详情
			see(row) {
				this.permissionVisible = true
				GoodSee(row.id).then((res) => {
					if (res.data.errmsg == '成功') {
						this.liste()
						this.div = res.data.data.detail
						this.div = this.div.replace(/\<img/gi, '<img class="richImg"')
						// console.log(this.div);
					} else {
						this.$message.error({
							type: 'info',
							message: res.data.errmsg
						})
					}
				})
			},
			handleClose() {
				this.permissionVisible = false
			},
			// 状态上架下架
			handlestatus(row) {
				this.$confirm(`此操作将${row.status == 0 ? '上架' : '下架'}商品---'${row.title}'---是否继续?', '提示`, {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						const data = {
							spuId: row.id,
							status: row.status == 1 ? 0 : 1
						}
						console.log(row.status)
						GoodStatus(data).then((res) => {
							console.log(res)
							if (res.data.errmsg == '成功') {
								this.liste()
								this.$message({
									type: 'success',
									message: row.status == 0 ? '上架成功' : '下架成功'
								})
							} else {
								this.$message.error({
									type: 'info',
									message: res.data.errmsg
								})
							}
						})
					})
					.catch(() => {
						this.$message({
							type: 'info',
							message: '已取消操作'
						})
					})
			},
			handleSelectionChange(val) {
				this.multipleSelection = []
				console.log(val)
				val.map(item => {
					this.multipleSelection.push(item.id)
				})
			},
			// 批量删除
			dels() {
				this.$confirm(`此操作将永久删除选中的'${this.multipleSelection.length}'件商品, 是否继续?', '提示`, {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						Gooddels(this.multipleSelection).then((res) => {
							if (res.data.errmsg == '成功') {
								this.liste()
								this.$message({
									type: 'success',
									message: '删除成功'
								})
							} else {
								this.$message.error({
									type: 'info',
									message: res.data.errmsg
								})
							}
						})
					})
					.catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						})
					})
			},
			// 删除
			del(row) {
				console.log('row.id :>> ', row.id)
				this.$confirm(`此操作将永久删除商品---'${row.title}'---是否继续?', '提示`, {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						Gooddel(row.id).then((res) => {
							if (res.data.errmsg == '成功') {
								this.liste()
								this.$message({
									type: 'success',
									message: '删除成功'
								})
							} else {
								this.$message.error({
									type: 'info',
									message: res.data.errmsg
								})
							}
						})
					})
					.catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						})
					})
			},
			// spu树
			list() {
				GoodSpous().then((res) => {
					this.options = this.renderTreeNodes(res.data.data)
					console.log(res)
				})
			},
			renderTreeNodes(datas) {
				const data = []
				datas.map((item) => {
					if (item.children.length > 0) {
						const dadax = {
							id: item.value,
							label: item.label,
							value: item.id,
							children: this.renderTreeNodes(item.children)
						}
						data.push(dadax)
					} else {
						const dadax = {
							id: item.id,
							label: item.label,
							value: item.id
						}
						data.push(dadax)
					}
					return data
				})
				return data
			},
			//  弹出框
			upad(row) {
				// console.log(111)
				// console.log(row)
				// console.log(222)
				if (!row) {
					this.$router.push({
						path: '/goods/Addandmodify'
					})
				} else {
					this.updataID = row.id
					this.$router.push({
						path: '/goods/Addandmodify',
						query: {
							id: this.updataID
						}
					})
				}
			},
			handleAvatarSuccess(res, file) {
				this.ruleForm.picUrl = res.url
			},
			beforeAvatarUpload(file) {
				const isJPG = file.type === 'image/jpeg'
				const isLt2M = file.size / 1024 / 1024 < 2
				if (!isJPG) {
					this.$message.error('上传头像图片只能是 JPG 格式!')
				}
				if (!isLt2M) {
					this.$message.error('上传头像图片大小不能超过 2MB!')
				}
				return isJPG && isLt2M
			},
			liste() {
				// console.log(this.count)
				// console.log(this.totalCount)
				const data = {
					page: this.pageNo,
					limit: this.count,
					barcode: this.formInline.barcode,
					status: this.formInline.status,
					title: this.formInline.title,
					categoryId: this.formInline.categoryId[this.formInline.categoryId.length - 1]
				}
				Goodlist(data).then((response) => {
					console.log("122")
					console.log(response)
					console.log("122")
					if (response.data.errmsg == '成功') {
						this.loading = false
						this.tableData = response.data.data.items
						this.totalCount = response.data.data.total
						this.count = response.data.data.pageSize
					} else {
						setTimeout(() => {
							this.loading = false
						}, 5000)
					}
				})
			},
			// 分页
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`)
				this.count = val
				this.liste()
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`)
				this.pageNo = val
				this.liste()
			}
		},
		created() {
			this.liste()
			this.list()
		}
	}
</script>

<style scoped="scoped" lang="less">
	// 头部
	#tops {
		width: 100%;
		overflow: hidden;
		// background-color: pink;
		// background-color: pink;
	}

	.Box {
		width: 100%;
		overflow: hidden;
	}

	// 中间
	.el-main {
		// background-color: #E9EEF3;
		color: #333;
		text-align: center;
		width: 100%;
		overflow: hidden;
		overflow-x: auto;
	}

	// 底部
	.buttom {
		// background-color: #B3C0D1;
		color: #333;
		// text-align: center;
		width: 100%;
		height: 130px !important;
	}

	.filter-container {
		width: 100%;
		height: 54px;
		line-height: 60px;
	}

	img {
		width: 80px;
	}

	.filter-item {
		display: inline-block;
		vertical-align: middle;
		margin-bottom: 10px;
		margin-right: 4px;
		float: left;
		margin-left: 20px;
	}

	.el-input {
		width: 200px !important;
		padding-left: 4px !important;
	}

	/* .el-scrollbar {
		height: 600px !important;
	} */

	.on .el-input {
		width: 300px !important;
	}

	.el-table--border,
	.el-table--group {
		font-size: 10px !important;
	}

	.el-pagination {
		padding: 24px 10px !important;
	}

	/* 头像上传 */
	.avatar-uploader .el-upload {

		position: relative;
		overflow: hidden;
	}

	.avatar-uploader-icon:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 120px;
		height: 120px;
		line-height: 120px;
		text-align: center;
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
	}

	.avatar {
		width: 120px;
		height: 120px;
		display: block;
	}

	::v-deep .richImg {
		// width: 100%;
		// height: 100%;
		max-width: 100%;
		max-height: 100%;
		height: auto;
	}
</style>
